<%@ page contentType="text/html; charset=UTF-8"%>
<%@include file="../../common/taglibs.jsp"%>

<script type="text/javascript">
    $(document).ready(function () {
        var taskCombo;

        jQuery("#billDetailGrid").jqGrid({
            url:'${ctx}/billDetail/gridByBill.do?billId=${bean.id}',
            datatype: "json",
//            colNames:["ID","帐单号","支付金额","支付日期","记账日期","经手人","操作"],
            colNames:["ID","支付日期","支付金额","记账日期","经手人","操作"],
            colModel:[
                {name:'id',index:'id',width:80,align:"center",sortable:false, hidden: true},
//                {name:'bill',index:'bill',width:80,align:"center",sortable:false},
                {name:'payDate',index:'payDate',width:80,align:"center",sortable:false},
                {name:'amount',index:'amount',width:80,align:"right",formatter:'currency',formatoptions:{thousandsSeparator:',',prefix:'￥'},sortable:false},
                {name:'handDate',index:'handDate',width:80,align:"center",sortable:false},
                {name:'handler',index:'handler',width:80,align:"center",sortable:false},
                {name:'operation',index:'Id',width:80,align:"center",sortable:false}
            ],
            rowNum:10,
            autowidth :true, // 宽度自适应父窗口宽度
            mtype:"POST", // POST GET
            prmNames:{rows:"pageSize", sort:"orderBy", order:"order"}, // 设置翻页、排序参数
            rowList:[10,20,50],
            pager: '#pageBillDetailGrid',
            jsonReader: { repeatitems : false },
            shrinkToFit: true,
//            caption: "账单明细列表",
//            multiselect: true,
            rownumbers: true,
            height: 230,
            footerrow : true,
            userDataOnFooter : true,
            gridComplete:function(){  //在此事件中循环为每一行添加修改和删除链接
                var ids=jQuery("#billDetailGrid").jqGrid('getDataIDs');
                for(var i=0; i<ids.length; i++){
                    var id=ids[i];
//                  var operation = "<a href='#' style='color:#f60' class='button' onclick='doView(" + id + ")'>查看</a>&nbsp;";
                    var operation = "<a href='#'  style='color:#f60' class='button' onclick='doDetailEdit(" + id + ")'>修改</a>";
                    operation += "&nbsp;<a href='#'  style='color:#f60' class='button' onclick='doDetailDelete(" + id + ")' >删除</a>";
                    jQuery("#billDetailGrid").jqGrid('setRowData', ids[i], { operation: operation});
                }
            }
        });

        jQuery("#billDetailGrid").jqGrid('navGrid','#pageBillDetailGrid',{edit:false,add:false,del:false,search:false});

        $('#project').combobox({
            valueField:'id',
            textField:'name',
            url:"${ctx}/project/getProjectList.do",
            panelHeight:"auto",
            value:"${bean.project.id}",
            onSelect:function(record){
                /*刷新数据，重新读取任务列表，并清空当前输入的值*/
                $('#task').combobox({
                    disabled:false,
                    url:"${ctx}/task/getTaskList.do?projectId="+record.id,
                    valueField:'id',
                    textField:'name',
                    panelHeight:"auto"
                }).combobox('clear');
            }
        });

        $('#task').combobox({
            valueField:'id',
            textField:'name',
            url:"${ctx}/task/getTaskList.do?id=${bean.task.id}",
            panelHeight:"auto",
            value:"${bean.task.id}"
        });

        /**
         * 进行校核绑定
         */
        $('#billEditForm input').each(function () {
            if ($(this).attr('required') || $(this).attr('validType')) {
                $(this).validatebox();
            }
        });

        $('#billDetailEditForm input').each(function () {
            if ($(this).attr('required') || $(this).attr('validType')) {
                $(this).validatebox();
            }
        });

        $('#formBillbutton').click(function() {
            if (!$("#billEditForm").form('validate')) {
                return;
            }

            //提交表单
            saveAjaxData("${ctx}/bill/save.do", "billEditForm", "billWindow", "billGrid");
            <%--saveAjaxData("${ctx}/bill/save.do", "billEditForm");--%>
        });

        $('#formBillDetailbutton').click(function() {
            if (!$("#billDetailEditForm").form('validate')) {
                return;
            }

            var bill = $("#bill").val();

            if(!bill) {
                showInfoMsg('请先保存账单，再编辑明细!');
                return;
            }

            //提交表单
            saveAjaxData("${ctx}/billDetail/save.do", "billDetailEditForm");
        });

		$("#editTable tr:odd").addClass("cssline_1");
        $("#editTable tr:even").addClass("cssline");
        $("#editTable2 tr:odd").addClass("cssline_1");
        $("#editTable2 tr:even").addClass("cssline");
    });

    /**
     * 明细账单数据加载
     */
    var doDetailEdit = function (id) {
        $('#billDetailEditForm').form({
            onLoadSuccess:function(data) {
                $("#bill").val(data.bill.id);
            }
        });
        $('#billDetailEditForm').form('load','${ctx}/billDetail/getDetail.do?id=' + id);

        $("#tt").tabs("select", "明细编辑");
    }

    var doDetailDelete = function (id) {
        doGridDelete("${ctx}/billDetail/delete.do?id=" + id, "billDetailGrid");
    }

    var closeDetailWindow = function() {
        $("#tt").tabs("select", "明细列表");
        jQuery("#billDetailGrid").jqGrid().trigger("reloadGrid");
    }
</script>

<div>
    <form:form id="billEditForm" name="billEditForm" action="${ctx}/bill/save.do" method="post">
	<input type="hidden" name="id" value="${bean.id}" />
        <div>
            <table border="0" cellspacing="1" cellpadding="1" width="100%" id="editTable">
                <tr>
                    <td width="15%" align="right">
                        帐单项目:
                    </td>
                    <td width="35%">
                        <input id="project" name="project" value="${bean.project.id}" style="width:200px">
                    </td>
                    <td width="15%" align="right">
                        任务:
                    </td>
                    <td>
                        <input id="task" name="task" style="width:200px"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        帐单类型:
                    </td>
                    <td>
                        <input class="easyui-combobox"
                               name="billType"
                               url="${ctx}/sysCode/getCodeDetailList.do?code=BILL_TYPE"
                               valueField="id"
                               textField="name"
                               panelHeight="auto"
                               panelWidth="200px"
                               value="${bean.billType.id}"
                               style="width:200px">
                    </td>
                    <td align="right">
                        金额:
                    </td>
                    <td>
                        <input class="easyui-numberbox" precision="2" groupSeparator="," prefix="￥" type="text" name="amount" value="${bean.amount}"  required="true" validType="number"/>元
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        帐单生成日期:
                    </td>
                    <td colspan="3">
						<input type="text" name="accoutDate" class="Wdate" style="width:120" value="${bean.accoutDate}" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>&nbsp;
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        经手人:
                    </td>
                    <td>
                        <input type="text" name="handler" value="${bean.handler}" />&nbsp;
                    </td>
                    <td align="right">
                        修改人:
                    </td>
                    <td>
                        <input type="text" name="modifier" value="${bean.modifier}" />&nbsp;
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        备注:
                    </td>
                    <td class="container" colspan="3">
                        <textarea name="remark" rows="5" cols="50">${bean.remark}</textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" valign="middle" align="center">
                        <input type="button" id="formBillbutton" value="确定" class="btn_Ok">&nbsp;
                        <input type="button" value="取消" class="btn_Del" onclick="closeWindow('billWindow')">
                    </td>
                </tr>
            </table>
        </div>
    </form:form>
    <div id="tt" class="easyui-tabs" style="width:798px;height:342px;">
        <div title="明细列表" style="padding:0px;overflow: hidden">
            <table id="billDetailGrid"></table>
            <div id="pageBillDetailGrid"></div>
        </div>
        <div title="明细编辑" style="padding:4px;">
            <form:form id="billDetailEditForm" name="billDetailEditForm" action="${ctx}/billDetail/save.do" method="post">
                <input type="hidden" name="id" value="" />
                <input type="hidden" id="bill" name="bill" value="${bean.id}" />
                <div>
                    <table border="0" cellspacing="1" width="100%" id="editTable2">
                        <tr class="cssline">
                            <td  class="csslabel">
                                支付金额:
                            </td>
                            <td  class="container">
                                <input class="easyui-numberbox" precision="2" groupSeparator="," prefix="￥" type="text" name="amount" value="" />&nbsp;
                            </td>
                        </tr>
                        <tr class="cssline">
                            <td  class="csslabel">
                                支付日期:
                            </td>
                            <td  class="container">
                                <input type="text" name="payDate" class="Wdate" value="" style="width:120px" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>&nbsp;
                            </td>
                        </tr>
                        <tr class="cssline">
                            <td  class="csslabel">
                                记账日期:
                            </td>
                            <td  class="container">
                                <input type="text" name="handDate" class="Wdate" value="" style="width:120px" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>&nbsp;
                            </td>
                        </tr>
                        <tr class="cssline">
                            <td  class="csslabel">
                                经手人:
                            </td>
                            <td  class="container">
                                <input type="text" name="handler" value="" />&nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" valign="middle" align="center">
                                <input type="button" id="formBillDetailbutton" value="确定" class="btn_Ok">&nbsp;
                                <input type="button" value="取消" class="btn_Del" onclick="closeDetailWindow()">
                            </td>
                        </tr>
                    </table>

                </div>
            </form:form>
        </div>
    </div>
</div>